<template name="neoceansoft-keyboard">

	<view  :style="{'height':popupHeight}" class="numView">

		<view style="display: flex;">


			<view :style="{'width':numWidht}">

				<view style="width: 100%; height: 2rpx;background-color: #efefef;" />
				<view style="display: flex;">
					<view v-for="(item,index) in num1" :style="{'height':numBtnHeight,'width':numBtnWidth+'px'}"
						class="numLayout">
						<view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
						<button plain="true" hover-class="numClickCss"
							:style="{'height':numBtnHeight,'width':numBtnWidth+'px'}" class="numBtn"
							@click="btnClick(item)">
							{{item}}
						</button>
						<view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
					</view>
				</view>


				<view style="width: 100%; height: 2rpx;background-color: #efefef;" />
				<view style="display: flex;">
					<view v-for="(item,index) in num2" :style="{'height':numBtnHeight,'width':numBtnWidth+'px'}"
						class="numLayout">
						<view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
						<button plain="true" hover-class="numClickCss"
							:style="{'height':numBtnHeight,'width':numBtnWidth+'px'}" class="numBtn"
							@click="btnClick(item)">
							{{item}}
						</button>
						<view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
					</view>
				</view>


				<view style="width: 100%; height: 2rpx;background-color: #efefef;" />
				<view style="display: flex;">
					<view v-for="(item,index) in num3" :style="{'height':numBtnHeight,'width':numBtnWidth+'px'}"
						class="numLayout">
						<view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
						<button plain="true" hover-class="numClickCss"
							:style="{'height':numBtnHeight,'width':numBtnWidth+'px'}" class="numBtn"
							@click="btnClick(item)">
							{{item}}
						</button>
						<view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
					</view>
				</view>


				<view style="width: 100%; height: 2rpx;background-color: #efefef;" />
				<view style="display: flex;">
					<view v-for="(item,index) in num4" class="numLayout">
						<view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
						<button plain="true" v-if="index==2||(keyboardType == 'password'&&index==1)"
							:hover-class="keyboardType=='payment'?'':'numClickCss'"
							:style="{'height':numBtnHeight,'width':numBtnWidth+'px'}" class="numBtn"
							@click="btnClick(item.type)">
							<view v-if="keyboardType!='payment'" class="iconfont icon-deletenumber"></view>

						</button>
						<button v-else plain="true" hover-class="numClickCss"
							:style="{'height':numBtnHeight,'width':keyboardType=='password'||(keyboardType=='payment'&&index==0)?((numBtnWidth*2)-1)+'px':(numBtnWidth-1)+'px'}"
							class="numBtn" @click="btnClick(item.type)">
							{{item.name}}
						</button>
						<view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
					</view>
				</view>




			</view>
			<view v-if="keyboardType=='payment'"
				:style="{'width':payboardWidth,'height':payboardHeight,'display':'flex'}">
				<view style="width: 2rpx;height: 100%;background-color: #efefef;"></view>
				<view :style="{'display':'flex','width':'100%','height':'100%'}">

					<view style="width: 100%;height: 100%;">
						<view style="width: 100%;height: 2rpx;background-color: #efefef;"></view>
						<button plain="true" hover-class="numClickCss"
							:style="{'height':numBtnHeight,'width':(numBtnWidth-1)+'px'}" class="numBtn" @click="btnClick(-2)">
							<view class="iconfont icon-deletenumber"></view>

						</button>
						<!--  -->
						<!-- 'color':behaviorTextColor,
							'background':behaviorBgColor -->
						<button plain="true" hover-class="behaviorCommonCss" :style="{'height':behaviorBtnHeight,'width':(numBtnWidth-1),'color':behaviorTextColor,
							'background':behaviorBgColor}" class="behaviorCss" @click="paymentClick()">
							{{behaviorName}}

						</button>
					</view>
				</view>





			</view>


		</view>





	</view>





</template>

<script>
	export default {
		data() {
			return {
				numBtnWidth: 0,
				numBtnHeight: '',
				behaviorBtnHeight: '',
				popupHeight: '',
				payboardWidth: '',
				payboardHeight: '',
				numWidht: '',
				numOpWidht: '',
				opBtnWidth: '',
				opBtnHeight1: '',
				opBtnHeight2: '',
				nums: [],
				isShowPay: true,
				bl: 0.45,
				num1: [1, 2, 3],
				num2: [4, 5, 6],
				num3: [7, 8, 9],
				num4: [{
					name: '.',
					type: '.'
				}, {
					name: '0',
					type: 0
				}, {
					name: '删除',
					type: -2
				}],


			}
		},
		props: {
			keyboardType: {
				type: String,
				default: "number" // number idcard,payment,password
			},
			behaviorName: {
				type: String,
				default: '付款'
			},
			behaviorTextColor: {
				type: String,
				default: '#ffffff'
			},
			behaviorBgColor: {
				type: String,
				default: '#41ae3c'
			}
		},


		created() {


			var that = this
			uni.getSystemInfo({
				success(res) {
					console.log("页面信息：" + JSON.stringify(res))
					var width = 0
					if (that.keyboardType == 'payment') {
						width = (res.screenWidth / 4) * 3
					} else {
						width = (res.screenWidth / 3) * 3
					}
					var height = ''
					if (that.keyboardType == 'payment') {
						that.bl = 0.58
						height = width / 3 * that.bl
					} else {
						height = width / 3 * that.bl
					}

					that.opBtnWidth = (res.screenWidth / 4) * 1 + 'px'
					// that.opBtnHeight1 = (height * 4) * (3 / 5) + 'px'
					// that.opBtnHeight2 = (height * 4) * (2 / 5) + 'px'
					that.opBtnHeight1 = ((height * 2) + 2.5) + 'px'
					that.opBtnHeight2 = ((height * 2) + 2) + 'px'
					that.numWidht = width + 'px'
					that.payboardWidth = (res.screenWidth - width) + 'px'
					that.payboardHeight = height * 3
					that.numBtnWidth = width / 3
					that.numBtnHeight = height + 'px'
					that.behaviorBtnHeight = height * 3 + 'px'
					that.popupHeight = (height * 4) + 'px'

				}
			})
			if (this.keyboardType == 'password') {
				//密码键盘，不存在小数点问题
				this.num4.splice(0, 1)
			} else if (this.keyboardType == 'idcard') {
				this.num4[0].name = 'X'
				this.num4[0].type = 'X'
			} else if (this.keyboardType == 'payment') {
				this.num4.splice(2, 1)
				var bean = this.num4[0]
				this.num4[0] = this.num4[1]
				this.num4[1] = bean

			}

		},
		methods: {
			paymentClick(){
				this.$emit('paymentClick')
			},


			// 数字点击事件回调
			btnClick(item) {
				// this.$emit('click',item)
				this.$emit('keyclick', item)
				this.inputNum(item)
			},
			// 输入处理事件回调
			inputNum(item) {
				switch (item) {
					case 0:
					//todo 验证待处理
						this.putNum('0')
						break
					case 1:
						//todo 验证待处理
						this.putNum('1')

						break
					case 2:
						//todo 验证待处理
						this.putNum('2')
						break
					case 3:
						//todo 验证待处理
						this.putNum('3')
						break
					case 4:
						//todo 验证待处理
						this.putNum('4')
						break
					case 5:
						//todo 验证待处理
						this.putNum('5')
						break
					case 6:
						//todo 验证待处理
						this.putNum('6')
						break
					case 7:
						//todo 验证待处理
						this.putNum('7')
						break
					case 8:
						//todo 验证待处理
						this.putNum('8')
						break
					case 9:
						//todo 验证待处理
						this.putNum('9')
						break
					case '.':
						this.putNum('.')
						break
					case 'X':
						this.putNum('X')
						break
					case -2:
						this.del()
						break

				}
			},
			putNum(data) {
				this.nums.push(data)
				var result = this.nums.join('')
				this.$emit('result', result)
			},
			del() {
				if (this.nums.length == 0) {
					return
				}
				this.nums.splice(this.nums.length - 1, 1)
				var result = this.nums.join('')
				this.$emit('result', result)



			},




		}
	}
</script>

<style scoped>
	@font-face {
		font-family: 'iconfont';

		src: url('https://at.alicdn.com/t/font_2180051_21huv31g6dq.woff2?t=1625469481487') format('woff2'),
			url('https://at.alicdn.com/t/font_2180051_21huv31g6dq.woff?t=1625469481487') format('woff'),
			url('https://at.alicdn.com/t/font_2180051_21huv31g6dq.ttf?t=1625469481487') format('truetype');

	}


	.iconfont {
		font-family: "iconfont" !important;
		font-size: 14px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icon-deletenumber:before {
		content: "\e666";
	}




	.numView {
		position: fixed;
		bottom: 0rpx;
		width: 100%;
	}

	.numBtn {
		display: flex;
		align-items: center;
		justify-content: center;
		justify-items: center;
		border-radius: 20rpx;
		border: 0rpx solid #ffffff;


	}

	.behaviorCss {
		display: flex;
		align-items: center;
		justify-content: center;
		justify-items: center;
		border-radius: 0rpx;
		border: 0rpx solid #E0E0E0;
		color: #ffffff;
		font-weight: 500;
		font-size: 30rpx;

	}

	.behaviorCommonCss {
		background-color: #efefef !important;
		transform: translate(1rpx, 1rpx);

	}

	.numLayout {
		display: flex;
	}

	.numLayout2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

	}

	.boderSy {
		width: 2rpx;
		background-color: #efefef;
	}

	.opBtn1 {
		background-color: #f29100;
		display: flex;
		align-items: center;
		justify-content: center;
		justify-items: center;
		align-content: center;
		color: #FFFFFF;
		font-weight: 400;
		font-size: 30rpx;
		text-align: center;


	}

	.numClickCss {
		background-color: #efefef;
		color: #FFFFFF;
	}


	.opBtn1x {
		background-color: #ffd28b;
		display: flex;
		color: #9fa0a0;
		align-items: center;
		justify-content: center;
		justify-items: center;
		align-content: center;
		font-weight: 400;
		font-size: 30rpx;
		text-align: center;

	}


	.opBtn2 {
		background-color: #0090ff;
		display: flex;
		align-items: center;
		justify-content: center;
		justify-items: center;
		align-content: center;
		color: #FFFFFF;
		font-weight: 400;
		font-size: 30rpx;
		text-align: center;

	}

	.opBtn2x {
		background-color: #7fcff4;
		display: flex;
		align-items: center;
		justify-content: center;
		justify-items: center;
		align-content: center;
		font-weight: 400;
		font-size: 30rpx;
		text-align: center;
		color: #9fa0a0;

	}

	.customStyle {
		color: 'red'
	}
</style>
